<template>
    <div class="index-wrapper">
        <!-- 顶部展示 -->
        <section class="volunteerTopInfo">
            <div class="flex-space-between">
                <span class="" style="margin-top:.2rem">
                    <i class="vaoluteer-num">{{indexData.volunteerCount}}</i>志愿者
                </span>
                <div class="flex-space-between rightInfo">
                    <div>
                        <p>{{indexData.activityCount}}</p>
                        <p>活动次数</p>
                    </div>
                    <div>
                        <p>{{indexData.integralCount}}</p>
                        <p>服务积分</p>
                    </div>
                </div>
            </div>
            <h3>神农架林区新时代文明实践中心</h3>
        </section>
        <!-- 轮播 -->
        <section class="swipe">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(el,index) in indexData.bannerList" :key="index">
                    <a :href="el.url"><img v-lazy='el.image' alt=""></a>
                </van-swipe-item>
            </van-swipe>
        </section>
        <!-- 通知 -->
        <div class="notice flex-align-center">
            <!-- <van-notice-bar
                text="河北省文联副主席张海英调研红春社区新时代文"
                color='#686868'
                background='#fff'
            >
                <div slot='left-icon' class="notice-icon">
                    最新动态
                    <van-icon name="volume" color='#F65D5D'/>

                </div>
            </van-notice-bar> -->
            <div class="notice-left">
                <span style='vertical-align:middle'>
                    最新动态
                </span>
                 <van-icon name="volume" color='#F65D5D'/>
            </div>
            <div class="notice-content">
                <ul :style="noticeStyle" class="notice-list">
                    <li v-for="(el,index) in indexData.noticeList" :key="index"  class="over1line news_item">
                        <router-link :to="'/article/detail/'+el.articleId">{{el.title}}</router-link>
                    </li>
                </ul>
            </div>
        </div>
        <!-- gird 分类 -->
        <div class="gird-wrap">
            <ul class="class-ui flex-space-between">
                <li v-for="(el,i) in classData" :key="i" @click="routerGo(el.url)">
                    <p>
                        <img :src="el.img" alt="">
                    </p>
                    <p>{{el.name}}</p>
                </li>
            </ul>
        </div>
        <!-- 四块广告牌 -->
        <div class="four-img-wrap">
            <div class="van-hairline--bottom flex-space-between-center title">
                <span>
                    <img src="../../../static/img/index/index_wrap/icon_contact@2x.png" alt="">
                    <span>
                        民星联线
                    </span>
                </span>
                <router-link to="/star/list"><span class="more">查看更多 ></span></router-link>
            </div>
            <div class="wrap flex-space-between">
                <div v-for="(el,index) in indexData.starsList" :key="index" class="four-item">
                    <router-link :to="'/article/detail/'+el.articleId"><img v-lazy="el.thumbImage" alt="">
                    <p class="text-bot">{{el.title}}</p>
                    </router-link>
                </div>
            </div>
        </div>
        <!-- 志愿活动招募 -->
        <div class="volunteerRecruit">
            <div class="van-hairline--bottom flex-space-between-center title">
                <span>
                    <img src="../../../static/img/index/index_wrap/icon_recruit@2x.png" alt="">
                    <span>
                        志愿活动招募
                    </span>
                </span>
                <router-link to='/voluteerActivity' tag='span' class="more">查看更多 ></router-link>
            </div>
            <ul class='recruit-list'>
                <li class="recruit-item flex-space-between-center" v-for="(el,index) in indexData.activityList" :key="index" @click="$router.push('/voluteerActivityDetail/'+el.activityId)">
                    <div>
                        <div class="flex">
                            <div style="padding-top: 3px"><span :class="'status-tag mr10 flex-center status-'+el.status">{{el.status|activityStatus}}</span></div>
                            <span class="color-special">{{el.title}}</span>
                        </div>
                        <div>
                            <span class="mr10">开始时间 :</span>
                            <span class="color-special">{{el.activityTime}} </span>  {{el.week}}
                        </div>
                        <div>
                            <span class="mr10">服务天数 :</span>
                            <span class="color-special">{{el.activityDays}}</span>天
                            
                        </div>
                        <div>
                            <span class="mr10">招募团体 :</span>
                            {{el.teamName}}
                        </div>
                    </div>
                    <div>
                        <img  class="recruit-logo" src="../../../static/img/index/index_wrap/logo@2x.png" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            classData:[
                {img:require('../../../static/img/index/index_wrap/icon_1@2x.png'),name:'我要点单', url: '/myOrder'},
                {img:require('../../../static/img/index/index_wrap/icon_2@2x.png'),name:'活动报名', url: '/voluteerActivity'},
                {img:require('../../../static/img/index/index_wrap/icon_3@2x.png'),name:'加入团队', url: '/team'},
                {img:require('../../../static/img/index/index_wrap/icon_4@2x.png'),name:'我要学习', url: '/learning'},
                // {img:require('../../../static/img/index/index_wrap/icon_5@2x.png'),name:'我要秀文明', url: ''},
                // {img:require('../../../static/img/index/index_wrap/icon_6@2x.png'),name:'我要拍陋习', url: ''},
                // {img:require('../../../static/img/index/index_wrap/icon_7@2x.png'),name:'我的微心愿', url: ''},
                // {img:require('../../../static/img/index/index_wrap/icon_8@2x.png'),name:'志愿者登陆', url: ''},
            ],
            indexData:{},
            noticeStyle:{},
            newsItem:null
        }
    },
    created(){
        this.getIndexData()
    },
    mounted() {
        
    },
    destroyed() {
        clearInterval(this.timeId)
        this.timeId=null
        window.removeEventListener('webkitTransitionEnd',this.removeTransform)
    },
    methods: {
        addTransform(){
                    this.newsItem=document.querySelector('.notice-list .news_item')
                    let h=this.newsItem.offsetHeight;
                    this.noticeStyle={
                        transform: `translate3d(0px,${-h}px,0px)`,
                        webkitTransform :  `translate3d(0px,${-h}px,0px)`,
                        transition : "transform 500ms ease-in-out",
                        webkitTransition : "transform 500ms ease-in-out",
                    }
        },
        removeTransform() {
                    let noticeList = document.querySelector(".notice-list")
                    var e = setTimeout(()=>{
                    clearTimeout(e)
                    this.noticeStyle={
                        transform: `translate3d(0, 0px, 0)`,
                        webkitTransform :  `translate3d(0, 0px, 0)`,
                        transition : "none",
                        webkitTransition : "none",
                    }
                    this.newsItem && noticeList.removeChild(this.newsItem),
                    this.newsItem && noticeList.appendChild(this.newsItem)
                }, 0)
        },
        startNotice(){
                
                
                const noticeLen=document.querySelectorAll('.notice-list .news_item').length;
                let n = "onwebkittransitionend" in window ? "webkitTransitionEnd" : "transitionend"
                , noticeList = document.querySelector(".notice-list")
              , newsItem = null,_this=this;   
                noticeList && (noticeList.addEventListener(n, this.removeTransform))
                noticeLen>1&&(this.timeId=setInterval(this.addTransform,3000))
            
            
        },
        listLoadingOnLoad(){

        },
        async getIndexData(){
            let res=await this.$http({
                method:'api.index.index'
            })
            this.indexData=res.data
            this.indexData.noticeList=res.data.noticeList
            this.$nextTick(()=>{
                this.startNotice()
            })
        },
        routerGo (url) {
            this.$router.push(url)
        }
    },
}
</script>

<style lang='scss' scoped> 
$themeColor:#F65D5D;
.volunteerTopInfo{height: 2.1rem;color: #ffffff;background: linear-gradient(180deg,#F65D5D,#E23C3C);
padding: 0 .4rem;padding-top: .5rem;box-sizing: border-box;font-size:14px;
.vaoluteer-num{font-style: normal;letter-spacing: 4px;}
p{margin-bottom: .17rem;}
.rightInfo{max-width: 50%;text-align: center;min-width: 35%;}
h3{font-size: .35rem;font-weight: bold;margin-top: .2rem;}
}
.swipe{height: 2.7rem;overflow:hidden;
img{width: 100%;height: 2.7rem;}
}
.notice{margin: .28rem 0;padding: .4rem;}
.notice-left{border: solid 1px #F65D5D;color: #F65D5D;padding: .1rem 6px;display: flex;
margin-right: .2rem;border-radius: 4px;width: 76px;}
.notice-icon{padding:0px 0.06rem;border: solid 1px #F65D5D;margin-right: 3px;border-radius: 4px;
font-size: 12px;color:#F65D5D; }
.gird-wrap{padding: 0 .33rem;font-size: 12px;color: #686868;text-align: center}
.class-ui{flex-wrap:wrap;
li{flex-basis: 25%;margin-bottom: .25rem;}
img{width: .88rem;height: .88rem;margin-bottom: .14rem;;}
}
.four-img-wrap,.volunteerRecruit{
    .title{padding: .2rem .4rem;
    img{width: .34rem;height: .34rem;margin-right: .16rem;vertical-align: sub;}
    .more{font-size: 12px;color: #686868;}
    }
    .wrap{padding: .2rem .4rem;flex-wrap: wrap}
    .four-item{width:3.28rem;border-radius: .1rem; margin-bottom: .14rem;position: relative;height: 2.18rem;
        img{width: 100%;height: 100%;}
    ;}
    .text-bot{position: absolute;border-radius: inherit;width: 100%;bottom: 0;
    background: rgba(0,0,0,.5);color: #fff;text-align: center;height: .52rem;line-height: .52rem;
    }
}
.recruit-list{
    padding:.2rem .4rem;background: #fff;
    .recruit-item{background: #EFEFEF;border-radius: .1rem;margin-bottom: .14rem;padding:.2rem;font-size: 14px;color: #888888;line-height: .5rem;}
    .color-special{color: #393939;}
    .status-tag{border-radius: .16rem;min-width: 1.1rem;line-height: .33rem;color:#fff;}
    
    .status-0{
        background: #b5bbbe;
    }
    .status-1{
        background: #FFA518;
    }
    .status-2{
        background: #378EEF;
    }
    .status-3{
        background: #0A930A;
    }
    .status-4{
        background: #F65D5D;
    }
}
.recruit-logo{width: 1.43rem;height: 1.43rem;;}
.notice-content{height: 24px;overflow: hidden;
li{height: 24px;line-height: 24px;font-size: 14px;}
}
</style>